<template>
	<div class="zh-select-input" >
    <zh-input v-model="queryParam.searchText" :delay="1000" placeholder="请输入查询内容" :suffix-icon="Search" >
      <template #prepend>
        <zh-select label="组织类型" placeholder="组织类型" :dropdownMatchSelectWidth="false" :options="dictData.orgType" v-model="queryParam.orgType" @change="onOrgTypeChange"></zh-select>
      </template>
    </zh-input>
    <el-scrollbar :height="isTagsview ? `calc(100vh - 162px)` : `calc(100vh - 128px)`">
    <zh-list :data-source="listData">
      <template #renderItem="{ item }">
        <a-list-item @click="onClick(item)" :class="item.orgId===state.activeOrgId?'active-org-id':null"><el-link :underline="false" >{{ item.orgName }}</el-link></a-list-item>
      </template> 
      <template #loadMore>
        <div
          v-if="state.hasNextPage && !state.loading"
          :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
        >
          <zh-button link @click="onLoadMore">加载更多</zh-button>
        </div>
      </template>
    </zh-list>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup name="orgList">
import { Search } from '@element-plus/icons-vue';
//------------------接收传入参数(组件)-------------------

//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
const { isTagsview } = storeToRefs($store.theme);
const queryParam=reactive<any>({pageNum:1,pageSize:20,parentFlag:false});
const listData: any = ref([]);
const state: any = reactive({hasNextPage:false,loading:false,activeOrgId:null
});
//------------------定义调用方法-------------------------
const emits = defineEmits([
	'node-click',
]);
const onClick=(e)=>{
  state.activeOrgId=e.orgId
  emits('node-click', e);
}
const onOrgTypeChange=()=>{
  query('');
}
const query=(orgName)=>{
  queryParam.pageNum=1;
  state.hasNextPage=false;
  state.loading=true;
  if(orgName){
    queryParam.searchText=orgName;
  }
  
  $api.common.send.post('org0001',queryParam).then((res)=>{
    listData.value=res.result.list;
    state.loading=false;
    state.hasNextPage=res.result.hasNextPage;
  }).catch(() => {
      state.loading=false;
  });
}
const refresh=()=>{
  state.loading=true;
  $api.common.send.post('org0001',queryParam).then((res)=>{
    listData.value=res.result.list;
    state.loading=false;
    state.hasNextPage=res.result.hasNextPage;
  }).catch(() => {
      state.loading=false;
  });
}
const onLoadMore=()=>{
  if(state.hasNextPage){
    state.loading=true;
    queryParam.pageNum=queryParam.pageNum+1
    $api.common.send.post('org0001',queryParam).then((res)=>{
      listData.value=listData.value.concat(res.result.list);
      state.loading=false;
      state.hasNextPage=res.result.hasNextPage;
    }).catch(() => {
      state.loading=false;
    });
  }
  
}
const clearActive=()=>{
  state.activeOrgId=null
}
watch(()=>queryParam.searchText, 
() => {
	query('');
});
//------------------初始化------------------------------

const dictParams = {
	dictFields: 'orgType',
};
const dictData = ref<any>({ nodeType: [], operating: [] });
$api.common.getBatchDict.post(dictParams).then((res: any) => {
	dictData.value = res.result;
});
onMounted(()=>{query('')})
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ query,clearActive,refresh });
</script>
<style lang="scss" scoped>
  .active-org-id{
    background-color: var(--el-color-primary-light-9);
  }
</style>